<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>莓草园</title>
		<link rel="stylesheet" href="./css/style.css" />
		<link rel="stylesheet" href="./css/swiper-bundle.min.css" />
		<style>
			/* 轮播样式 */
			.swiper-container {
				width: 100%;
				height: 40rem;
				margin: 0 auto;
				--swiper-navigation-color: #D9D4D3;
				/* 单独设置按钮颜色 */
			}
			.swiper-button-prev {
				left: 10rem;
			}
			
			.swiper-button-prev::after {
				content: none;
			}
			
			.swiper-button-next {
				right: 10rem;
			}
			
			.swiper-button-next::after {
				content: none;
			}
			
			/* 中间内容样式 */
			.content{
				background: #000000;
				height: 10rem;
			}
			
		</style>
	</head>
	<body id="body">
		<!-- 头部 -->
		<div class="head">
			<!-- 头部-logo -->
			<div class="first-logo">
				<div><img src="./img/logo.png" /></div>
				<ul>
					<li>莓农园-长丰草莓批发采购</li>
					<li>|</li>
					<li>联系电话：<span>15588565012</span></li>
					<li>|</li>
					<li>微信：<span>15588565012</span></li>
				</ul>
			</div>
			<!-- 头部-菜单 -->
			<div class="menu">
				<ul>
					<li class="product">产品中心</li>
					<li class="active">首页</li>
					<li>关于我们</li>
					<li>草莓批发</li>
					<li>零售采购</li>
					<li>加盟代理</li>
					<li>草莓采购</li>
					<li>草莓知识</li>
				</ul>
			</div>
			<!-- 头部-轮播图 -->
			<div class="swiper-container" id="swiper-banner">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="img/banner1.png" class="banner-img" /></div>
					<div class="swiper-slide"><img src="img/banner2.png" class="banner-img" /></div>
					<div class="swiper-slide"><img src="img/banner3.png" class="banner-img" /></div>
				</div>
				<div class="swiper-button-prev"><img src="img/left.png" class="btn-banner" /></div>
				<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
				<div class="swiper-button-next"><img src="img/right.png" class="btn-banner" /></div>
				<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
				<div class="product-menu">
					<ul>
						<li>
							<div>红颜草莓</div>
							<ul>
								<li>大果</li>
								<li>中果</li>
								<li>小果</li>
							</ul>
						</li>
						<li>
							<div>红颜草莓</div>
							<ul>
								<li>大果</li>
								<li>中果</li>
								<li>小果</li>
							</ul>
						</li>
						<li>
							<div>红颜草莓</div>
							<ul>
								<li>大果</li>
								<li>中果</li>
								<li>小果</li>
							</ul>
						</li>
						<li>
							<div>红颜草莓</div>
							<ul>
								<li>大果</li>
								<li>中果</li>
								<li>小果</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
			<!-- 头部-搜索框 -->
			<div class="search">
				<div class="search-child">
					<img src="img/adv.png" />
					<div>站内公告：莓农园卡加上啊哈嘎哈嘎嘎</div>
				</div>
				<div class="search-child">
					<input type="text" placeholder="请输入关键词" value="" />
					<img src="img/search.png" />
				</div>
			</div>
		</div>
		<!-- 中间部分 -->
		<div class="content">2</div>
		<!-- 尾部 -->
		<div class="foot">
			<div class="foot-menu">
				<div>
					<div><img src="img/logo2.png"></div>
					<div class="mobile">
						<img src="img/mobile.png" />
						<div>
							<div>联系电话</div>
							<div>15588565013</div>
						</div>
					</div>
				</div>
				<div class="quick">
					<div>快速入口</div>
					<ul>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
					</ul>
				</div>
				<div class="quick">
					<div>快速入口</div>
					<ul>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
					</ul>
				</div>
				<div class="quick">
					<div>快速入口</div>
					<ul>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
						<li>草莓批发价格</li>
					</ul>
				</div>
				<div class="code">
					<img src="img/code.png" />
					<div>莓农果园微信：</div>
					<div>15588565013</div>
				</div>
			</div>
			<div class="beian">CopyRight 2019-2021 合肥莓农商贸</div>
		</div>
	</body>
	<script src="./js/jquery-3.1.1.min.js"></script>
	<script src="./js/swiper-bundle.min.js"></script>
	<script>
		var mySwiper = new Swiper('#swiper-banner', {
			autoplay: {
				delay: 5000, //1秒切换一次
			},
			effect: 'fade',
			loop: true, // 循环模式选项
			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			}
		})
	</script>
</html>
